<!-- src/views/UserCenter.vue -->
<script lang="ts" setup>
import { ref } from 'vue';
import { useAuthStore } from '@/store/modules/auth';
import { useCaptcha } from '@/hooks/business/captcha';
import { registerUser } from '@/service/api';
import RegisterFace from './modules/register-face.vue';

const authStore = useAuthStore();
const userInfo = ref(authStore.userInfo);
const { loading } = useCaptcha();
const flag = ref<boolean>(false);

enum Roles {
  SUPER = '超级管理员',
  ADMIN = '老师',
  USER = '学生'
}

const rolesMap = {
  R_SUPER: Roles.SUPER,
  R_ADMIN: Roles.ADMIN,
  R_USER: Roles.USER
};

const saveUserInfo = async () => {
  await registerUser(userInfo.value);
  window.$message?.success('修改个人信息成功');
};

const flagOk = () => {
  console.log('ok');
  userInfo.value.faceInfo = 1;
  flag.value = false;
};

const flagCancel = () => {
  console.log('cancel');
};

const registerFaceInfo = () => {
  flag.value = true;
};
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <AModal v-model:open="flag" style="width: 1000px" title="注册人脸信息" @ok="flagOk" @cancel="flagCancel">
      <RegisterFace></RegisterFace>
    </AModal>
    <ACard title="学生中心" :loading="loading">
      <!-- 学生信息展示 -->
      <ARow :gutter="16">
        <ACol v-if="userInfo" :span="24">
          <AForm :model="userInfo">
            <AFormItem label="学号">
              <AInput v-model:value="userInfo.userId" style="width: auto" disabled />
            </AFormItem>
            <AFormItem label="姓名">
              <AInput v-model:value="userInfo.userName" style="width: auto" disabled />
            </AFormItem>
            <AFormItem label="学院">
              <AInput v-model:value="userInfo.department" style="width: auto" disabled />
            </AFormItem>
            <AFormItem label="班级">
              <AInput v-model:value="userInfo.className" style="width: auto" disabled />
            </AFormItem>
            <AFormItem label="手机号">
              <AInput v-model:value="userInfo.phone" style="width: auto" />
            </AFormItem>
            <AFormItem label="电子邮件">
              <AInput v-model:value="userInfo.email" style="width: auto" />
            </AFormItem>
            <AFormItem label="角色">
              <AInput
                v-model:value="rolesMap[userInfo.roles[0] as keyof typeof rolesMap]"
                style="width: auto"
                disabled
              />
            </AFormItem>
            <AFormItem label="人脸信息">
              <template v-if="userInfo.faceInfo === 1">
                <label>人脸信息已注册</label>
              </template>
              <template v-else>
                <AButton @click="registerFaceInfo">注册人脸信息</AButton>
              </template>
            </AFormItem>
          </AForm>
        </ACol>
      </ARow>

      <AButton type="primary" @click="saveUserInfo">保存</AButton>
    </ACard>
  </div>
</template>

<style scoped>
.a-button {
  margin-top: 10px;
}
</style>
